table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  thead {
    th {
      height: 38px;
      background-color: #f7f7f7;
      vertical-align: top;
      text-align: left;
      font-weight: normal;
      color: #666;
      background-position: 0 0;
      background-repeat: repeat-x;
      .wp {
        height: 18px;
        line-height: 18px;
        padding: 8px 10px;
        background-position: 0 -56px;
        box-sizing: content-box;
      }
      .wp-dura {
        width: 71px;
      }
    }
    .rank-hd {
      width: 77px;
      background-position: 0 0;
    }
    .title-hd {
      width: 326px;
    }
    .duration-hd {
      width: 91px;
      box-sizing: content-box;
    }
    .artist-hd {
      width: 176px;
    }
  }
  tbody {
    tr {
      &:hover .duration-td .u-opt {
        display: block;
      }
      &:hover .duration-td .dura {
        display: none;
      }
      &.even {
        background-color: #f7f7f7;
      }
      td {
        padding: 6px 10px;
        line-height: 18px;
        text-align: left;
        background: url(~@/assets/images/header/table.png) no-repeat 0 9999px;
      }
      .rank-td {
        .hd {
          height: 18px;
          .num {
            float: left;
            width: 25px;
            margin-left: 0;
            text-align: center;
          }
          .rk {
            float: right;
            width: 32px;
            margin-right: -5px;
            text-align: center;
            .icon {
              display: block;
              float: none;
              margin: 0 auto;
              padding-left: 0;
              width: 16px;
              height: 17px;
              overflow: hidden;
              // background: url(../../assets/images/icon.png) no-repeat;
              background-position: -67px -283px;
            }
          }
          .cover {
            margin-right: 2px;
            width: 17px;
            height: 17px;
            cursor: pointer;
            // background: url(../../assets/images/table.png) no-repeat;
            background-position: 0 -103px;
            &:hover {
              // background-position: 0 0;
              background-position: 0 -128px !important;
            }
            &.z-sel {
              background-position: -20px -128px;
              &:hover {
                // background-position: 0 0;
                background-position: -20px -128px !important;
              }
            }
          }
        }
      }
      .title-td {
        float: left;
        width: 326px;
        .img-wrap {
          float: left;
          margin-right: 17px;
          img {
            width: 50px;
            height: 50px;
          }
        }
        .temp-mt {
          margin-top: 17px;
          .dec {
            width: calc(100% - 92px);
          }
        }
        .cover {
          float: left;
          margin-right: 8px;
          width: 17px;
          height: 17px;
          cursor: pointer;
          // background: url(../../assets/images/table.png) no-repeat;
          background-position: 0 -103px;
          &:hover {
            // background-position: 0 0;
            background-position: 0 -128px !important;
          }
          &.z-sel {
            background-position: -20px -128px;
            &:hover {
              // background-position: 0 0;
              background-position: -20px -128px !important;
            }
          }
        }
        .dec {
          float: left;
          width: calc(100% - 25px);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          .alia {
            color: #aeaeae;
          }
        }
      }
      .duration-td {
        .u-opt {
          // width: 79px;
          display: none;
          float: left;
          .add {
            float: left;
            margin-top: 2px;
            width: 13px;
            height: 13px;
            background-position: 0 -700px;
            &:hover {
              background-position: -22px -700px;
            }
          }
          .u-table {
            margin: 2px 0 0 1px;
          }
          .icn-fav {
            background-position: 0 -174px;
            &:hover {
              background-position: -20px -174px;
            }
          }
          .icn-share {
            background-position: 0 -195px;
            &:hover {
              background-position: -20px -195px;
            }
          }
          .icn-dl {
            background-position: -81px -174px;
            &:hover {
              background-position: -104px -174px;
            }
          }
        }

        .u-table {
          float: left;
          width: 18px;
          height: 16px;
          margin: 2px 0 0 1px;
          overflow: hidden;
          text-indent: -999px;
          cursor: pointer;
        }
      }
      .artist-td {
        .artist {
          width: 156px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
